<template>
  <div class="advertie-page">
		<el-breadcrumb separator=">">
      <el-breadcrumb-item>广告管理</el-breadcrumb-item>
			<el-breadcrumb-item>投放策略列表</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/add_strategy' }">新增策略</el-breadcrumb-item>
		</el-breadcrumb>
	<div class="advertie-content">
    <div class="dfsb">
      <el-form  ref="ruleFormRef"  style="" :inline="true" :model="ruleForm"  :rules="rules"  label-width="auto"  class="demo-ruleForm"  status-icon>
        <el-form-item label="策略名称" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.remark" />
        </el-form-item>
      </el-form>
      <el-button>返回</el-button>
    </div>
    <!-- 广告素材和播放设备 -->
    <div class="content">
      <!-- 广告素材 -->
      <div class="left">
        <div class="title">
          <span>广告素材</span>
          <el-button round :icon="Plus" color="#0071bb" @click="addMaterial()">添加</el-button>
        </div>
        <!-- 卡片组件 -->
        <div class="card">
          <div class="card-item" v-for="(item,index) in material" :key="index">
            <div class="img">
              <el-image style="width: 120px; height: 80px" :src="item.url"></el-image>
            </div>
            <div class="name">
              {{item.name}}
            </div>
            <div class="play">
              <span class="text">播放时长</span>
              <div class="time">
                <el-select v-model="item.time" placeholder="" style="width:100px">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                />
              </el-select>
              <div class="icon">
                <el-icon>  
                  <CaretTop />
                </el-icon>
                <el-icon>  
                  <CaretBottom />
                </el-icon>
              </div>
              </div>
              <span class="delete">
                <img src="/src/assets/strategy/delete.png" alt="" style="width:34px;">
              </span>
            </div>
          </div>
        </div>
      </div>
      <!-- 投放设备 -->
      <div class="right">
        <div class="title">
          <span>投放设备</span>
          <el-button round :icon="Plus" color="#0071bb" @click="addDevice()">添加</el-button>
          <!-- 表格数据 -->
        </div>
        <div class="table">
			    <el-table :data="tableData" style="width: 100%;">
            <el-table-column type="selection" width="55" label="全选"/>
			    	<el-table-column type="index" width="50" label="序号"/>
			    	<el-table-column prop="deviceName" label="设备名称" />
			    	<el-table-column prop="deviceNo" label="设备编号"/>
			    	<el-table-column prop="type" label="设备类型" />
			    	<el-table-column prop="" label="操作">
			    		<template #default="scope">
            				<!-- <el-button  size="small"  type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                    <span style="color:#0071BB;cursor: pointer;">删除</span>
          				</template>
			    	</el-table-column>
			    </el-table>
          <!-- 底部分页 -->
		      <div class="page_number">
		      	<el-pagination v-model:current-page="pager.currentPage" v-model:page-size="pager.pageSize" 
		      		:disabled="!pager.total"  layout="prev, pager, next, jumper,total" :total="pager.total"
		      		@size-change="handleSizeChange" @current-change="handleCurrentChange"/>
		      </div>
		    </div>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="footer">
      <el-button type="primary" color="#0071bb" @click="onSave()">保存</el-button>
      <el-button @click="onBack()">返回</el-button>
    </div>
	</div>
    <!-- 添加素材 -->
    <AddMaterial v-if="showMaterial" @close="onCloseMaterial()" @submit="onSubmitMaterial()"></AddMaterial>
    <!-- 添加设备 -->
    <AddDevice v-if="showDevice" @close="onCloseDevice()" @submit="onSubmitDevice()"></AddDevice>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRouter } from 'vue-router';
import type { FormInstance, FormRules } from 'element-plus'
import { CaretTop, CaretBottom, Minus, Plus, Delete} from '@element-plus/icons-vue'
// 添加素材
import AddMaterial from './components/addMaterial.vue'
// 添加设备
import AddDevice from './components/addDevice.vue'
interface RuleForm {
  name: string
}
const options = [
  {
    value: '5',
    label: '5秒',
  },
  {
    value: '10',
    label: '10秒',
  },
  {
    value: '15',
    label: '15秒',
  },
]
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
  name:'',
  remark:''
})
const rules = ref<FormRules<RuleForm>>({
  name: [
    { required: true, message: '请输入策略名称', trigger: 'blur' }
  ],
})
const router = useRouter();
const tableData = ref<any>([])
// 是否显示新增素材弹窗
const showMaterial = ref(false)
// 是否显示新增设备弹窗
const showDevice = ref(false)
// 分页
const pager = ref({
	currentPage:1,
	pageSize:10,
	total:10,
})
// 初始化表格数据
const initData = () => {
	tableData.value = [
    {
	    id:1,
      deviceName: '办公大厦',
      deviceNo:'123243756',
      type:'零售柜'
    },
    {
      id:2,
      deviceName: '办公大厦',
      deviceNo:'123243756',
      type:'零售柜'
    }
]
}
// 素材列表数据
const material = ref([
  {
    name:'常熟广电',
    time:'15秒',
    url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  },
  {
    name:'常熟广电',
    time:'15秒',
    url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  },
  {
    name:'常熟广电',
    time:'5秒',
    url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  },
  {
    name:'常熟广电',
    time:'10秒',
    url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  },
])
// 改变pageSize
const handleSizeChange = (val : number) => {
	console.log(`${val} items per page`)
}
// 改变当前页码 currentPage
const handleCurrentChange = (val : number) => {
	console.log(`current page: ${val}`)
}
// 保存
const onSave = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      router.push('/advertising_strategy');
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 添加素材
const addMaterial = () => {
  showMaterial.value = true
}
// 添加设备
const addDevice = () => {
  showDevice.value = true
}
// 返回
const onBack = () => {
	router.push('/advertising_strategy');
}
// 关闭新增素材弹窗
const onCloseMaterial = () => {
  showMaterial.value = false
}
// 关闭新增设备弹窗
const onCloseDevice = () => {
  showDevice.value = false
}
onMounted(() => {
	initData()
})
</script>

<style lang="scss" scoped>
.advertie-page{
	padding: 20px 10px;
	box-sizing: border-box;
  background-color: #f1f1f1;
  height: 100%;
}
.dfsb{
  display: flex;
  justify-content: space-between;
  background: #fff;
}
.advertie-content{
	padding: 20px;
  box-sizing: border-box;
  margin-top: 20px;
  background: #fff;
  border-radius: 4px;
  height: calc(100% - 40px);
	.head{
		padding: 0 20px;
		height: 40px;
		line-height: 40px;
		color: #fff;
		background: #215077;
	}
	.go{
		color: yellow;
	}
	.search{
		width: 100%;
		display: flex;
		padding: 0 20px;
		height: 60px;
		line-height: 60px;
		justify-content: space-between;
	}
	.margin-r-10{
		margin-right: 10px;
	}
  .content{
    width: 100%;
    display: flex;
    background: #fff;
    height: 85%;
  }
  .title{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #4D4D4D;
  }
  .left,.right{
    flex: 1;
    border-radius: 4px;
    background-color: #f1f1f1;
    height: calc(100% - 40px);
    padding: 20px;
    box-sizing: border-box;
    border-radius: 4px;
  }
  .left{
    margin-right: 16px;
    overflow-y: auto;
  }
  .card{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .card-item{
      width: 240px;
      margin-right: 16px;
      background: #fff;
      margin-bottom: 10px;
    }
    .img{
      padding: 10px;
      width: 100%;
      text-align: center;
    }
    .name{
      height: 36px;
      line-height: 36px;
      background: #808080;
      color: #fff;
      text-align: center;
    }
    .play{
      color: #4D4D4D;
      padding: 4px 10px;
      display: flex;
      align-items: center;
    }
    .text{
      margin-right: 4px;
      align-self: left;
      font-size: 12px;
    }
    .time{
      flex: 1;
      display: flex;
      flex-direction: row;
    }
    .icon{
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      margin: 0 4px;
      align-self: center;
      justify-content: center;
    }
    .delete{
      margin-left: 4px;
      cursor: pointer;
      align-self: right;
    }

  }
  .table{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .page_number{
    align-self: center;
  }
  .footer{
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
<style>
.el-scrollbar__view{
  height: 100%;
}
</style>